<template>
    <div class="box">
        <div v-if="boxShow" style="height: 500px;width: 100%;margin-top: 40px;">
            <n-card title="📖 已挂载知识库" embedded :bordered="false" hoverable>
                <div class="line">
                    <div class="title">
                        <jb-icon :local="true" icon="ri:pushpin-line" height="20"></jb-icon>&nbsp;<span class="title-span">名字:</span>
                    </div>
                    <div class="desc">{{ klb.value }}</div>
                </div>
                <div class="line">
                    <div class="title">
                        <jb-icon :local="true" icon="ri:pushpin-line" height="20"></jb-icon>&nbsp;<span class="title-span">状态:</span>
                    </div>
                    <div class="desc">

                        <n-tag type="error" v-if="klb.enable==false">
                            关闭
                        </n-tag>
                        <n-tag type="success" v-else>
                            开启
                        </n-tag>
                    </div>
                </div>
                <div class="line">
                    <div class="title">
                        <jb-icon :local="true" icon="ri:pushpin-line" height="20"></jb-icon>&nbsp;<span class="title-span">简介:</span>
                    </div>
                    <div class="desc">{{ klb.briefInfo }}</div>
                </div>
                <div class="line-btn">
                    <n-button strong secondary type="primary" @click="remove">
                        <jb-icon :local="true" icon="ri:delete-bin-line" height="15"></jb-icon>
                        移除当前知识库
                    </n-button>
                </div>
            </n-card>
        </div>

        <div v-else style="width: 100%">
            <knowledge v-if="knowledgeShow" :appId="appId" @closeKnowledge="handleCloseKnowledge"></knowledge>
            <n-empty v-else class="empty-box" description="还没有挂载知识库哦" style="--n-icon-size: 500px;display: flex;">
                <template #icon style="height: 250px;">
                    <jb-icon :local="true" icon="fa6-solid:dice-d6" height="250"></jb-icon>
                </template>
                <template #extra>
                    <n-button size="large" strong secondary type="primary" @click="knowledgeShow=!knowledgeShow">
                        <jb-icon :local="true" icon="ri:add-large-fill" height="15"></jb-icon>&nbsp;
                        点击挂载知识库
                    </n-button>
                </template>
            </n-empty>
        </div>
    </div>


</template>

<script setup>
import {useResetableData} from "@/hooks/common/use-resetable-data.js";
import {onMounted, ref} from "vue";
import Knowledge from './cnps/index.vue'
import {JBoltApi} from "@/service/request/index.js";
import {useMessage} from 'naive-ui'

const message = useMessage()

const props = defineProps({
    appId: String
})
//选择知识库弹窗
const knowledgeShow = ref(false);
//知识库是否存在的box
const boxShow = ref(false);
const klb = ref({})




const pageRef = ref(null)
const pageConditions = useResetableData({
    appId: props.appId
})

//关闭弹窗
function handleCloseKnowledge() {
    loadSelectedList();
}

function loadSelectedList() {
    JBoltApi.tryGet('/aiApp/getKlbByAppId', {
        appId: props.appId
    }).then(res => {
        console.log(res.data)
        if (res.data) {
            boxShow.value = true;
            klb.value = res.data[0];
        }else{
            console.log('没有知识库')
            boxShow.value = false;
            knowledgeShow.value = false;
        }
    }).catch(error => {
        console.error(error)
    })
}
//移除当前选中的知识库
function remove() {
    if (klb.value) {
        JBoltApi.tryPost('/aiApp/removeKnowledgeBases', {
            appId: props.appId,
            list: [klb.value.id]
        }).then((res) => {
            message.success('移除成功');
            klb.value = {};
            boxShow.value = false;
            knowledgeShow.value = false;
        }).catch(error => {
            console.error(error)
        })
    }else{
        message.error('请选择知识库');
    }
}


onMounted(() => {

    if (props.appId) {
        loadSelectedList()
    }
})

</script>


<style scoped>
.empty-box :deep(.n-empty__icon) {
    display: flex;
    align-items: center;
    justify-content: center;

}

.empty-box :deep(.n-empty__description) {
    font-size: 18px;
}

.line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    margin: 50px;
    color: #797979;
}

.title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-left: 30px;
    font-size: 18px;
    align-items: flex-start;
    font-weight: 600;


}

.line-btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.box {
    height: 100%;
    display: flex;

}
.title-span{
    width: 70px;
    text-align: center;
}
.desc{
    font-size: 16px;
}

</style>